<template>
  <div class="tab-content">
    <div class="tab-main-content">
      <div class="search">
        <el-input
          placeholder="请输入停车场名称"
          v-model="query_parkName"
          class="input-with-select"
          size="small"
          @keyup.enter.native="searchParkingsLot"
        >
          <template slot="prepend">停车场</template>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchParkingsLot"
          ></el-button>
        </el-input>
      </div>
    </div>

    <div class="park-list">
      <el-checkbox-group
        v-model="checkedParklot"
        @change="handleCheckParklot"
      >
        <div
          class="park-item"
          v-for="(item, index) in parkInfoList"
          :key="index"
        >
          <div class="park-name item">
            <el-checkbox
              :label="item.parkName+ '@' + item.qrCodeUrl"
            >{{item.parkName}}</el-checkbox>
          </div>

          <div class="qr-src item">
            <div class="title"> 二维码链接</div>

            <el-input
              v-model="item.qrCodeUrl"
              :disabled="true"
              size="small"
            >
            </el-input>
          </div>

          <div class="actions item">
            <a class="hover-item has-tip" @click.prevent="doCopy(item, index)">复制链接
              <span class="more-tip" v-show="showCopyed && index === copiedIndex">Copied !</span>
            </a>
            <a class="hover-item" @click.prevent="showPreviewDialogFn(item)">预览</a>
            <a class="hover-item" @click.prevent="showParkingInfoFn(item)">车场显示信息</a>
          </div>

        </div>
      </el-checkbox-group>

      <div class="all-check">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
        >全选</el-checkbox>
        <div class="checked-tips">
          已选择{{checkedParklot.length}}个停车场
        </div>
      </div>

    </div>

    <el-button
      type="primary"
      size="small"
      @click="batchDownloadQrCode"
    >下载二维码</el-button>

    <div class="qr-tips">
      <div class="title">车场二维码-使用场景</div>
      <div class="tips-bd">
        单车场使用，支持对应车场在场车辆的查费缴费。
      </div>
    </div>


    <el-dialog
      :title="previewInfo.parkName + '二维码'"
      :visible.sync="isShowPreviewDialog"
      width="400px"
      class="zb-dialog"
    >
      <div class="img-box">
        <!-- <img :src="previewInfo.logoUrl" alt=""> -->
        <qrcode v-show="previewInfo.qrCodeUrl" :value="previewInfo.qrCodeUrl" tag="img" :options="{ width: 220 }"></qrcode>
      </div>
    </el-dialog>

    <el-dialog
      title="编辑车场显示信息"
      :visible.sync="isShowParkingInfo"
      width="600px"
      class="zb-dialog"
      @close="logoList = []"
    >
      <div class="parkinglot-showInfo-content">
        <el-form
          :model="parkShowInfo"
          ref="parkShowInfoForm"
          label-width="130px"
          size="small"
          class="zb-form"
        >
          <el-form-item label="停车场信息显示">
            <el-checkbox-group v-model="parkShowInfo.checkedItem">
              <el-checkbox label="showName">停车场名称</el-checkbox>
              <el-checkbox label="showCheckTime">入场时间</el-checkbox>
              <el-checkbox label="showDuring">停车时长</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="停车场LOGO"
            prop=""
          >
            <el-upload
              class="upload-demo"
              :class="{'is-uploaded': logoList.length > 0}"
              action=""
              :on-remove="handleChange"
              :on-change="handleChange"
              :before-upload="beforeAvatarUpload"
              :limit="1"
              accept="image/gif,image/jpeg,image/jpg,image/png"
              :file-list="logoList"
              list-type="picture-card"
              :auto-upload="false"
            >
              <el-button
                size="small"
                type="primary"
              ><span class="plus-icon">+</span> 选取图片</el-button>
              <div
                slot="tip"
                class="el-upload__tip"
              >* LOGO高度不超过150px，宽度不超过200px，建议上传png格式的文件。</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          size="medium"
          @click="updateParkShowInfo"
        >确 定</el-button>
        <el-button
          size="medium"
          plain
          @click="isShowParkingInfo = false"
        >取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>


<script>
import common from '@/mixins/common.js'
let copiedTimer = null
export default {
  mixins: [common],
  props: {
    info: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data() {
    return {
      query_parkName: "",
      parkInfoList: [],
      checkAll: false,
      checkedParklot: [],
      isIndeterminate: false,
      isShowPreviewDialog: false,
      previewInfo: {
        qrCodeUrl: null,
        parkName: ''
      },
      isShowParkingInfo: false,
      parkShowInfo: {
        checkedItem: [],
        logoUrl: '',
        logoBase64: '',
      },
      logoList: [],
      showCopyed: false,
      copiedIndex: -1
    };
  },

  mounted () {
    this.parkInfoList = JSON.parse(JSON.stringify(this.info))

    this.searchParkingsLot()
  },

  methods: {
    // 复制链接
    doCopy (item, index) {
      let self = this
      this.$copyText(item.qrCodeUrl).then(function (e) {
        self.showCopyed = true
        self.copiedIndex = index
        clearTimeout(copiedTimer)
        copiedTimer = null
        copiedTimer = setTimeout(function () {
          self.showCopyed = false
        }, 2000)
      }, function (e) {
      })
    },

    // 搜索停车场名称
    searchParkingsLot () {
      let _query_parkName = this.query_parkName

      if (!_query_parkName) {
        this.parkInfoList = JSON.parse(JSON.stringify(this.info))
      } else {
        this.parkInfoList = this.info.filter(item => {
          let name = item.parkName
          return name.indexOf(_query_parkName) > -1
        })
      }
      // let

      this.handleCheckParklot([])
    },

    getParkShowInfo (parkId) {
      let self = this
      let params = {
        parkId: parkId
      }
      API.fetchGet('/valueAdded/getParkShowInfo', params)
        .then(data => {
          self.setParkingInfoFn(data)
        })
    },

    // 编辑停车场信息
    updateParkShowInfo () {
      let self = this
      let _parkShowInfo = this.parkShowInfo
      let _checkedItem = _parkShowInfo.checkedItem
      let params = {
        logoBase64: _parkShowInfo.logoBase64,
        parkId: _parkShowInfo.parkId,
        showCheckTime: _checkedItem.indexOf('showCheckTime') > -1,
        showDuring: _checkedItem.indexOf('showDuring') > -1,
        showName: _checkedItem.indexOf('showName') > -1
      }
      API.fetchPost('/valueAdded/updateParkShowInfo', params)
        .then(data => {
          self.showToast('保存成功！', 1, 1500)
          self.isShowParkingInfo = false
        }, err => {
          console.log(err)
        })
    },

    // 批量下载
    batchDownloadQrCode () {
      if (this.checkedParklot.length === 0) {
        this.showToast('请先选择停车场', 0, 1500)
        return
      }
      // let params = {
      //   urlList: this.checkedParklot
      // }
      API.fetchPostData('/valueAdded/batchDownloadQrCode', this.checkedParklot)
        .then(data => {
          console.log(data)
          // let blob = new Blob([data], {
          //   type: "application/zip"
          // })
          // console.log(blob)

          let objUrl = URL.createObjectURL(data)

          const link = document.createElement('a');
          link.setAttribute('href', objUrl);
          link.setAttribute('download', 'qrCode.zip');
          link.style.visibility = 'hidden';
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

          // window.location.href = objUrl
          this.showToast('下载成功！', 1, 1500)
        }, err => {
          console.log(err)
          this.showToast('下载失败！', 2, 1500)
        })
    },

    handleCheckAllChange(Val) {
      this.checkedParklot = []
      if (Val) {
        let _list = this.parkInfoList
        let _checked = []
        _list.forEach(item => {
          _checked.push(item.parkName + "@" + item.qrCodeUrl)
        })

        this.checkedParklot = _checked
      }
      this.isIndeterminate = false;
    },

    handleCheckParklot(Val) {
      let checkedCount = Val.length || this.checkedParklot.length;
      this.checkAll = checkedCount === this.parkInfoList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.parkInfoList.length;
    },

    // 点击显示 车场显示信息 弹框
    showParkingInfoFn (item) {
      this.getParkShowInfo(item.parkId)
    },

    setParkingInfoFn (item) {
      let _checkedItem = []
      if (item.showName) {
        _checkedItem.push('showName')
      }
      if (item.showCheckTime) {
        _checkedItem.push('showCheckTime')
      }
      if (item.showDuring) {
        _checkedItem.push('showDuring')
      }
      this.logoList = []
      this.parkShowInfo.checkedItem = _checkedItem

      this.parkShowInfo.logoUrl = item.logoUrl
      this.parkShowInfo.logoBase64 = item.logoBase64
      this.parkShowInfo.parkId = item.parkId
      if (item.logoUrl) {
        this.logoList.push({url: item.logoUrl})
      }
      this.isShowParkingInfo = true
    },

    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.logoList.push(file)
        this.getBase64Url(file)
      } else {
        this.logoList = []
        this.parkShowInfo.logoBase64 = null
      }
    },

    getBase64Url (file) {
      let self = this
      if (file.raw) {
        let reader = new FileReader()
        reader.readAsDataURL(file.raw)
        reader.onload = function (e) {
          // resolve(this.result)
          let _res = this.result
          self.parkShowInfo.logoBase64 = _res.substr(_res.indexOf('base64,') + 7)
        }
      }
    },

    showPreviewDialogFn (item) {
      this.isShowPreviewDialog = true
      this.previewInfo.qrCodeUrl = item.qrCodeUrl
      this.previewInfo.parkName = item.parkName
    },

    beforeAvatarUpload(file) {
      return false;
      // const isJPG = file.type === 'image/jpeg';
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      // return isJPG && isLt2M;
    }
  }
};
</script>

<style lang='less' scoped>
@import "./index.less";
</style>

<style lang="less">
.parkinglot-showInfo-content {
  .is-uploaded {
    .el-upload {
      display: none;
    }
  }
}
</style>
